<template>
	<el-row id="container">

		<Header></Header>

		<el-col :span="24" id="outter_container">
			<el-col :span="14" :offset="5" id="content_container">

				<el-col :span="24" id="transactiontitle">
					<div id="title"> 
						<span> 交易详细 </span>
					</div>

					<el-breadcrumb separator="/" id="breadcrumb">
						<el-breadcrumb-item id="breadcrumblink" :to="{ path: '/' }">主页</el-breadcrumb-item>
						<el-breadcrumb-item id="breadcrumblink" :to="{ path: '/transactions' }">交易</el-breadcrumb-item>
						<el-breadcrumb-item id="currentpage">交易详细</el-breadcrumb-item>
					</el-breadcrumb>
				</el-col>

				<el-col :span="24" id="transactioninfo">
					<el-table :data="tableData" style="width: 100%" @cell-click="readdetail" id="infotable" :cell-style="cellStyle">
						<!-- <el-table-column label="区块信息"> -->
							<el-table-column prop="mkey" align="left" width="140%" label="交易信息"></el-table-column>
							<el-table-column prop="mvalue" width="550%" align="left"></el-table-column>
							<el-table-column align="left">
								<template slot-scope="scope">
									<!-- <div id="ebutton"> -->
										<el-button v-if="scope.row.mkey.toString()==='交易凭证哈希：'" size="mini" @click="view_note">预览票据</el-button>
									<!-- </div> -->
								</template>
							</el-table-column>
							<!-- <el-table-column align="left"></el-table-column> -->
						<!-- </el-table-column> -->
					</el-table>
				</el-col>

			</el-col>
		</el-col>

		<el-dialog :visible.sync="dialogVisible" width="500px" :before-close="handleClose" id="note_dialog">
			<div id="print_container">
	            <Retail v-if="show" :notedata="notedata"></Retail>
	            <Checkreport v-if="show1" :notedata="notedata"></Checkreport>
	        </div>
		</el-dialog>

		<Footer></Footer>

	</el-row>
</template>

<script>

	import Header from '../components/header1.vue'
	import Footer from '../components/footer.vue'
	import Retail from '../components/retailnote.vue'
	import Checkreport from '../components/checkreport.vue'
	import Commonjs from "../utils/common.js"

	export default {

		components: { 
			Header, 
			Footer, 
			Retail, 
			Checkreport
		},

		data () {
			return {
				dialogVisible: false,
				ctxdetail: "",
				cloadbus: false,
				tableData: [],
				show:false,
				show1:false,
				notedata: ""
			}
		},

		created () {
			eventBus.$on('txdetail',txsdetail => {
				if (txsdetail != "" && txsdetail != undefined){
					this.cloadbus = true
					// window.addEventListener("beforeunload",()=>{
						window.localStorage.setItem("txdetail",JSON.stringify(txsdetail))
					// })
					this.ctxdetail = txsdetail
					this.settxdata(txsdetail.data)
				} else if (txsdetail === undefined){
				}
			})
		},

		mounted () {
			if (this.cloadbus === false) {
				this.ctxdetail = JSON.parse(window.localStorage.getItem("txdetail"))
				this.settxdata(this.ctxdetail.data)
			}
			eventBus.$off('txdetail')
		},

		destroyed() {
			if(this.blocklist != "") {
				eventBus.$emit('blockdetail',this.blocklist)
			}
		},

		methods: {

			change:function(index,row){
                // console.log(index,row);
            },

            headerStyle({row, rowIndex}) {
            	return {
            		"background": "#F2F2F4",
            		"color": "#333333",
            		// "font-size":"1vw"
            	}
            },

			handleClose(done) {
				done()
			},

			cellStyle({row, column, rowIndex, columnIndex}){
				if(rowIndex === 4 && columnIndex === 1){ //指定坐标
			        return {
			        	// "color":"#3498db",
			        	"color":"#1DB2BF",
			        	"cursor": "pointer"
			        }
			    }
			},

			readdetail(row, event, column, cell) {
				if(row.mkey[0].toString()==="所属区块：" && column.innerText!="所属区块：")
				{
					let param = {hash:row.mvalue[0].toString()}
					this.$api.post('blockchain/block', param, r => {
						this.blocklist = r
						this.$router.push(`/blocks/${JSON.stringify(r.data.hash)}`)
					})
				} else if(row.mkey.toString()==="交易凭证哈希") {//弹出二维码
					
				}
			},

			settxdata (txdetail){

				let temparray = []
				let temphash = {
					mkey:[],
					mvalue:[]
				}
				let tempData = []

				for( let p in txdetail) {
					temphash = {
						mkey:[],
						mvalue:[]
					}
					if (p==="blockNumber" 
						|| p==="number" 
						|| p==="source" 
						|| p==="mineTime"
						|| p==="totalPrice"){
							continue;
					}
					
					if (p==="time")
					{
						let date
						if(txdetail[p].toString().length===10)
						{
							date = new Date(txdetail[p] * 1000)
						} else {
							date = new Date(txdetail[p])
						}

						let a = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
						function paddNum(s) {
							s += ""
							return s.replace(/^(\d)$/,"0$1");
						}
						let h = paddNum(date.getHours());
						let m = paddNum(date.getMinutes());
						let s = paddNum(date.getSeconds());
						a = a + " " + h + ":" + m + ":" + s

						if (date.getHours() < 12) {
							a = a + " AM"
						} else {
							a = a + " PM"
						}

						temphash["mvalue"].push(a)
					} else if (p==="type") {
						let a

						switch (txdetail[p]) {
							case "RetailInfo": a="零售单"; temphash["mvalue"].push(a); break;
							case "SaleInfo" : a="销售单"; temphash["mvalue"].push(a); break;
							case "PurchaseInfo" : a="进货单"; temphash["mvalue"].push(a); break;
							case "ReceiveInfo" : a="收货单"; temphash["mvalue"].push(a); break;
							case "AccessCertificate" : a="准入证明"; temphash["mvalue"].push(a); break;
							case "Market" : a="市场检查表"; temphash["mvalue"].push(a); break;
							case "Gov" : a="日常检查表"; temphash["mvalue"].push(a); break;
							default: temphash["mvalue"].push(txdetail[p]); break;
						}
						
					} else if (p==="extra") {
						// console.log(txdetail[p]["marketName"]==="广州黄沙水产批发市场")
						if (txdetail[p]["marketName"] != undefined) {
							temphash["mvalue"].push(txdetail[p]["marketName"].toString())
						} else {
							temphash["mvalue"].push("")
						}
					} else {
						temphash["mvalue"].push(txdetail[p])
					}

					switch(p) {
						case "mark": p="交易单号："; break;
						case "type": p="交易类型："; break;
						case "txHash": p="交易ID："; break;
						case "time": p="时间："; break;
						case "blockHash": p="所属区块："; break;
						case "hash": p="交易凭证哈希："; break;
						case "extra": p="所属市场："; break;
					}

					temphash["mkey"].push(p)
					tempData.push(temphash)
					// this.tableData.push(temphash)
				}

				// for(let s = 0 in tempData.length-1) {
					// this.tableData.push(temphash)
					// let temp = ""
					// temp = this.tableData[0]
					this.tableData[0] = tempData[3]
					this.tableData[1] = tempData[4]
					this.tableData[2] = tempData[0]
					this.tableData[3] = tempData[5]
					this.tableData[4] = tempData[1]
					this.tableData[5] = tempData[6]
					this.tableData[6] = tempData[2]
					// this.tableData[3] = temp
					// s += 1
				// }
			},

			view_note() {

				let source = this.ctxdetail.data.source
				let hash = this.ctxdetail.data.hash
				let contentFileId = this.ctxdetail.data.extra.contentFileId
				let param = {
					source:source, 
					hash:hash, 
					contentFileId:contentFileId
				}

				this.$api.post('blockchain/bill', param, r => {
					// console.log(r.data)
					this.notedata = r
					this.dialogVisible = true
					if(this.ctxdetail.data.type==="Market" 
						|| this.ctxdetail.data.type==="Gov" 
						|| this.ctxdetail.data.type==="AccessCertificate") {
							this.show1 = true
					} else {
							this.show = true
					}
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	.el-button {
		border: 1px solid #1DB2BF; 
		color: #1DB2BF;
	}

	.el-button:hover {
		background-color: #1DB2BF;
		color: #fff;
	}

	#currentpage>>>.el-breadcrumb__inner{
		font-size: 0.9vw;
		color: #1DB2BF;
	}

	#breadcrumblink>>>.el-breadcrumb__inner{
		font-size: 0.9vw;
		font-weight: 400;
	}

	#breadcrumblink>>>.el-breadcrumb__inner.is-link:hover {
		color: #1DB2BF;
	}

	#breadcrumb {
		float: right;
		/*font-size: 0.83vw;*/
		position: relative;
        top: 50%; 
        margin-top: -1.1vw;
	}

	/*.el-breadcrumb__inner {
		color: #1DB2BF;
	}

	.el-breadcrumb__item:last-child {
		color: #1DB2BF;
	}*/

	#container {
		position: absolute;
		margin-top: 0px;
		margin-bottom: 0px;
		height: 100%;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	#view_note {
		float: right;
		/*display: inline-block;*/
		margin-right: 2%;
		position: relative;
        top: 50%; 
        margin-top: -20.8px;

	}

	#outter_container {
		height: 82.6%;
		margin-top: 4.5px;
	}

	#transactiontitle {
		height: 8.1%;
		border-bottom:2px solid #E6E6E6;
	}

	#content_container {
		height: 100%;
		background-color: rgb(248, 248, 248);
		padding: 18px;
		padding-top: 10px;
	}

	#transactioninfo {
		margin-top: 2%;
		width: 100%;
	}

	#infotable {
		margin: 0 auto;
	}

	#print_container {
		width: auto;
		margin: 0 auto;
	}

	#note_dialog {
		/*width: 1000px;*/
		/*max-height: 600px;*/
		/*height: 1000px;*/
	}

	#title {
		/*margin-top: 0.8%;*/
		font-size: 1.2vw;
		/*height: 100%;*/
		position: relative;
        top: 50%; 
        margin-top: -1vw;
	}

</style>